<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Proto: Default Drag and Drop</title>

<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.1.js"></script>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/widgets/2/container/container_core_2.1.1.js"></script> 
<script  type="text/javascript" src="scripts/proto.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/reset-fonts-grids/reset-fonts-grids.css">
<link href="css/yui.css" rel="stylesheet" type="text/css">

<style>
p{font-size:100%;padding:0 0 .5em 0;}
p#bottom{margin-top:40px;font-size:77%;}
h1 {font-size:136%; padding:.2em 0 .3em 0; font-weight:bold; }
h2 {font-size:122%; padding:.2em 0 .3em 0; font-weight:bold; color:#090;}
h1,h2,h3,h4,h5,h6 {
	font-family: arial, serif;
}
ul {
	margin:0px;
	padding:0px;
}
li { 
	float:left;
	list-style:none;
	margin:10px;
}
.drop-here{
	border:1px solid gray;
	width:75px;
	height:75px;
	padding:10px;
	margin:10px;
	text-align:center;
}
</style>

<script type="text/javascript">
var pageLoad = function() 
{
	var dd = new YAHOO.proto.SimpleDD("pictureDrag", 
		{
			"dragClass":       "drag-me",
			"dropClass":       "drop-here"
		}
	);
}
YAHOO.util.Event.addListener(window, 'load', pageLoad);
</script>

</head>

<body>
<div id="doc" class="yui-t7">

<div id="hd"><h1>Default Drag and Drop</h1></div>

<div id="bd">
<h2 >Some Draggable Items</h2>
<div>
<ul>
	<li><img class="drag-me" width="75" height="75" 
			src="http://static.flickr.com/74/162582364_7fc3e2d60d_s.jpg"/></li>
	<li><img class="drag-me" width="75" height="75" 
			src="http://static.flickr.com/67/162582262_e969394bc3_s.jpg"/></li>
	<li><img class="drag-me" width="75" height="75" 
			src="http://static.flickr.com/49/162582189_e0571b02e2_s.jpg"/></li>
	<li><img class="drag-me" width="75" height="75" 		
			src="http://static.flickr.com/53/162581581_de49021696_s.jpg"/></li>
	<li><img class="drag-me" width="75" height="75" 
			src="http://static.flickr.com/74/161894590_9a1a9788e1_s.jpg"/></li>
	<li><img class="drag-me" width="75" height="75"
			src="http://static.flickr.com/55/161894230_a4f1baf3d2_s.jpg"/></li>
</ul>
</div>
<h2 style="clear:both;" >And a Drop Zone</h2>
	<div class="drop-here">Drop Pix Here</div>
<h2 style="clear:both;" >And a Second Drop Zone</h2>
	<div class="drop-here">Drop More Pix Here</div>

</div>
</div>
</body>
</html>
